<template>
  <scroll-view scroll-y class="scroll-container">
    <view class="section">
      <view class="section-title">泉州风光</view>
      <swiper class="swiper" indicator-dots autoplay interval="3000" duration="500">
        <swiper-item v-for="(img, idx) in sceneryImgs" :key="idx">
          <image :src="img" class="swiper-img" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="section">
      <view class="section-title">泉州介绍</view>
      <rich-text :nodes="cityIntro"></rich-text>
    </view>

    <view class="section">
      <view class="section-title">探索进度</view>
        <text>当前进度: 75%</text>
        <progress percent="75" show-info stroke-width="6" color="#07c160" />
    </view>

    <view class="section">
      <view class="section-title">选择城市</view>
      <picker mode="region" :value="region" @change="onRegionChange">
        <view class="picker-text">当前选择: {{ region[0] }} · {{ region[1] }} · {{ region[2] }}</view>
      </picker>
    </view>

    <view class="section">
      <view class="section-title">泉州宣传</view>
      <video class="video" :src="videoUrl" controls poster="/static/quanzhou-poster.jpg"></video>
    </view>

    <view class="section">
      <view class="section-title">偏好设置</view>
      <view class="preference-group">

        <view class="preference-item">
          <text>出行方式</text>
          <radio-group @change="onTravelChange">
            <label class="radio-label">
              <radio value="公交" checked />公交
            </label>
            <label class="radio-label">
              <radio value="自驾" />自驾
            </label>
            <label class="radio-label">
              <radio value="步行" />步行
            </label>
          </radio-group>
        </view>

        <view class="preference-item">
          <text>显示推荐景点:</text>
          <switch :checked="showRecommend" @change="onSwitchChange" />
        </view>

        
		<view class="slider-item">
		      <text>探索半径：{{ radius }}km</text>
		      <slider :value="radius" @change="onSliderChange" min="1" max="20" step="1" />
		    </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      sceneryImgs: [
        '/static/city1.jpg', 
        '/static/city2.jpg',
        '/static/city3.jpg'
      ],
      cityIntro: `
        <p style="font-weight:bold; color:#333;">海上丝绸之路起点 - 泉州</p>
        <p>历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
        <p>著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
        <p>特色文化：拥有南音、水傀儡和闽南建筑等丰富的非物质文化遗产。</p>
      `,
      region: ['福建省', '泉州市', '丰泽区'],
      videoUrl: '/static/city-video.mp4', 
      showRecommend: true,
      travelMode: '公交',
	  radius: 5
    };
  },
  methods: {
    onRegionChange(e) {
      this.region = e.detail.value;
    },
    onTravelChange(e) {
      this.travelMode = e.detail.value;
    },
    onSwitchChange(e) {
      this.showRecommend = e.detail.value;
    },
    onSliderChange(e) {
	this.radius = e.detail.value;
    }
  }
};
</script>

<style scoped>
.scroll-container {
  height: 100vh;
  box-sizing: border-box;
  padding: 16rpx;
}
.section {
  margin-bottom: 32rpx;
  background: #eaeaea;
  border-radius: 8rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.swiper {
  width: 100%;
  height: 300rpx;
}
.swiper-img {
  width: 100%;
  height: 100%;
  border-radius: 4rpx;
}
.progress-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.picker-text {
  font-size: 28rpx;
  color: #666;
  padding: 16rpx 0;
  border: 1rpx solid #eee;
  border-radius: 4rpx;
}
.video {
  width: 100%;
  height: 300rpx;
  border-radius: 4rpx;
}
.preference-group {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.preference-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.radio-group {
  display: flex;
}
.radio-label {
  display: flex;
  align-items: center;
  margin-right: 32rpx;
}
</style>